<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="common/include :: header('消费明细服务清单')" />
</head>
<body>
<div class="ui-layout-center">
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">仓库：</label>
            <div class="col-sm-8">
                <select  id="storeId" class="form-control" name="storeId" th:with="type=${@dict.getType('si_car_package')}">
                    <option value="">请选择</option>
                    <option th:each="store:${stores}" th:value="${store.id}" th:text="${store.storeName}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">入库时间：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="putStoreTime" id="putStoreTime" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">备注信息：</label>
            <div class="col-sm-8">
                <textarea id="remark" name="remark" class="form-control"></textarea>
            </div>
        </div>


    <div class="btn-group-sm" id="goodsStoreToolbar" role="group">
        <a class="btn btn-success" onclick="closeWindows()">
            <i class="fa fa-plus"></i> 关闭
        </a>
        <a class="btn btn-danger" onclick="submitBill()">
            <i class="fa fa-plus"></i> 立即提交
        </a>
    </div>

    <div class="col-sm-12 select-table table-striped">
        <table id="goodsStoreTable"></table>
    </div>

</div>

<div class="ui-layout-east">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="post-form">
                <div class="select-list">
                    <ul>
                        <li>
                            关键字：<input type="text" name="keyword"/>
                        </li>
                        <li>
                            仓库：
                            <select name="storeId" th:with="type=${@dict.getType('si_car_package')}">
                                <option value="">所有</option>
                                <option th:each="store:${stores}" th:value="${store.id}" th:text="${store.storeName}"></option>
                            </select>
                        </li>
                        <li>
                            分类：
                            <select name="categoryId" >
                                <option value="">所有</option>
                                <option th:each="goodsCategorie:${goodsCategories}" th:value="${goodsCategorie.id}" th:text="${goodsCategorie.categoryName}"></option>
                            </select>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="goodsToolbar" role="group">
        </div>

        <div class="col-sm-12 select-table table-striped">
            <table id="goodsTable"></table>
        </div>
    </div>
</div>
<th:block th:include="common/include :: footer" />
<th:block th:include="common/include :: layout-latest" />
<link rel="stylesheet" type="text/css" href="/plugins/datetimepicker/jquery.datetimepicker.min.css"/>
<script src="/plugins/datetimepicker/jquery.datetimepicker.full.js"></script>
    <script th:inline="javascript">
        var categoryData = [[${@dict.getType('bus_goods_classify')}]];
        // OUTER-LAYOUT
        $('body').layout({
            east__size:	'30%',
        });
        $(function() {
            var options = {
                id:"goodsStoreTable",
                toolbar: "goodsStoreToolbar",
                uniqueId:"goodsId",
                columns: [
                    {
                        field: 'goodsName',
                        title: '名称',
                        sortable: true
                    },
                    {
                        field: 'price',
                        title: '价格',
                        sortable: true,
                        formatter: function(value, row, index) {
                            var actions = [];
                            actions.push('<input class="form-control" onblur="changePrice('+ row.goodsId +', this)" value="'+value+'"  type="text" name="price" id="price">')
                            return actions.join('');
                        }
                    },
                    {
                        field: 'amounts',
                        title: '数量',
                        sortable: true,
                        formatter: function(value, row, index) {
                            var actions = [];
                            actions.push('<input class="form-control" onblur="changeAmounts('+ row.goodsId +', this)" value="'+value+'" type="text" name="amounts" id="amounts">')
                            return actions.join('');
                        }
                    },
                    {
                        field: 'totalPrice',
                        title: '总价格',
                        sortable: true
                    },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: function(value, row, index) {
                            var actions = [];
                            actions.push('<a class="btn btn-warning btn-xs " href="javascript:void(0)" ' +
                                'onclick="decrServiceItem(\'' + row.goodsId + '\')"><i class="fa fa-minus"></i></a> ');
                            return actions.join('');
                        }
                    }]
            };
            $.table.init(options);
        });

        $(function() {
            var options = {
                id:"goodsTable",
                toolbar: "goodsToolbar",
                uniqueId:"id",
                url:"/business/goods/query",
                columns: [
                    {
                        field: 'id',
                        title: '序号',
                        visible: true
                    },
                    {
                        field: 'goodsCover',
                        title: '物品',
                        visible: true,
                        formatter: function(value, row, index) {
                            var actions = [];
                            actions.push('<a href="#" onclick="showImg('+row.id+')"><span>'+row.goodsName+'</span></a>');
                            return actions.join('');
                        }
                    },
                    {
                        field: 'goodsName',
                        title: '名称',
                        sortable: true
                    },

                    {
                        field: 'brand',
                        title: '品牌',
                        sortable: true
                    },
                    {
                        field: 'categoryId',
                        title: '分类',
                        sortable: true,
                        formatter: function(value, row, index) {
                            return $.table.selectDictLabel(categoryData, value);
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: function(value, row, index) {
                            var actions = [];
                                actions.push('<a class="btn btn-info btn-xs " href="javascript:void(0)" ' +
                                    'onclick="addserviceItem(\'' + row.id + '\')"><i class="fa fa-plus"></i></a> ');
                            return actions.join('');
                        }
                    }]
            };
            $.table.init(options);
        });
        //高级查询中的时间控件
        $('#putStoreTime').datetimepicker({
            format:'Y-m-d'
        });
        $.datetimepicker.setLocale('zh');

        function addserviceItem(id) {
            //查询出改行的数据
            var rs=$('#goodsTable').bootstrapTable('getRowByUniqueId',id);
            //追加一条数据到中间表的数据中
            var statementItemData=$('#goodsStoreTable').bootstrapTable('getRowByUniqueId',id);
            if (statementItemData){
                $('#statementItemTable').bootstrapTable('updateCellByUniqueId', {
                });
            }else{
                $('#goodsStoreTable')
                    .bootstrapTable('append', {"goodsName":rs.goodsName,"goodsId":rs.id,"price":'',"amounts":''});
            }

        }

        function closeWindows() {
            $.modal.closeTab();
        }


        function decrServiceItem(id) {
                $('#goodsStoreTable').bootstrapTable('removeByUniqueId',id);
        }

        //修改金额
        function changePrice(id,obj,column) {
            var value = $(obj).val();
            var row = $('#goodsStoreTable').bootstrapTable('getRowByUniqueId',id);
            //将 input 的值存进 row 中
            row.price = value;
            //更新指定的行，调用 'updateRow' 则会将 row 数据更新到 data 中，然后再重新加载
            $('#goodsStoreTable').bootstrapTable('updateCellByUniqueId', {
                id: 'id',
                field: 'price',
                value: value
            });
            row.totalPrice = row.price * row.amounts;
            $('#goodsStoreTable').bootstrapTable('updateCellByUniqueId', {
                id: 'id',
                field: 'totalPrice',
                value: row.price * row.amounts
            });
        }
        //修改总数量
        function changeAmounts(id,obj) {
            var value = $(obj).val();
            //通过 index 获取指定的行
            var row = $('#goodsStoreTable').bootstrapTable('getRowByUniqueId',id);
            //将 input 的值存进 row 中
            row.amounts = value;
            //更新指定的行，调用 'updateRow' 则会将 row 数据更新到 data 中，然后再重新加载
            $('#goodsStoreTable').bootstrapTable('updateCellByUniqueId', {
                id: 'id',
                field: 'amounts',
                value: value
            });
            row.totalPrice = row.price * row.amounts;
            $('#goodsStoreTable').bootstrapTable('updateCellByUniqueId', {
                id: 'id',
                field: 'totalPrice',
                value: row.price * row.amounts
            });
        }


        function submitBill() {
            $.modal.confirm("确定提交该入库单吗?",function () {
                var stockBillItem= $('#goodsStoreTable').bootstrapTable('getData',false);
                var stockBill = {};
                stockBill.type = 0;
                stockBill.storeId = $("#storeId").val();
                stockBill.busiDate =$("#putStoreTime").val();
                stockBill.remark =$("#remark").val();


                var list= [];
                list.push(stockBill);
                list.push(stockBillItem);

                var config = {
                    url: "/business/stockBill/putStoreBill",
                    type: "post",
                    dataType: "json",
                    data: JSON.stringify(list),
                    contentType: 'application/json;charset=UTF-8',
                    success: function(result) {
                        if (result.code==0){
                            $.modal.closeTab();
                            $.modal.openTab("出入库明细","/business/stockBill/listPage",true);
                        }else{
                            $.modal.confirm(result.msg);
                        }
                    }
                };
                $.ajax(config)

            });
        }

    </script>
</body>
</html>